<template>
	<view class="conter">
		<header-box :title="title"></header-box>

		<view class="conter-text">
			<view class="bgc">
				<view class="shop-heig">
					<text>商品</text>
					<view class="">
						<input type="text" v-model="shoppinName" placeholder="请输入商品名称" />
					</view>
				</view>
				<view @tap="goHome('/pages/shopping/select')" class="text-heig">
					<text>单位</text>
					<view class="">
						{{monad}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<!-- <view @tap="goHome('/pages/shopping/classFenlist')" class="text-heig">
					<text>分类</text>
					<view class="">
						{{className}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view> -->
				<view @tap="goHome('/pages/shopping/classShopp')" class="text-heig">
					<text>分类</text>
					<view class="">
						{{className}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view class="left-box">
					<text>商品图片</text>
					<view class="" style="margin-top: 20rpx;">
						<u-upload max-count="1"
							:action="action"
							@on-success="goodsImage"
							@on-remove="removeUpload"
							width="200rpx" height="200rpx"
							:file-list="fileList">
						</u-upload>
					</view>
				</view>
			</view>
		</view>

		<view class="add bg-gradual-green" @click="addShopping">
			确定添加
		</view>





	</view>
</template>

<script>
	import headerBox from '../../components/header/header.vue'

	export default {
		components: {
			headerBox
		},
		data() {
			return {
				picture: {},
				title: '添加商品',
				showNum: false,
				show: false,
				mode: 'date',
				monad: '请选择单位',
				action: this.$UPLOAD,
				// pathList: [],
				pathList: '',
				shoppinName: '',
				classId: '',
				methodsNum: '',
				init: '',
				className: '请选择分类',
			}
		},
		onLoad(e) {
			console.log('跳转方法', e)
			this.methodsNum = e.item
			this.title = e.title
			this.classId = e.classId
		},
		onShow() {},
		methods: {
			goodsImage(e) {
				this.pathList = e.data.url
			},
			
			removeUpload(index, lists) {
				this.pathList = ''
			},

			beforeUpload(index, list) {
				console.log(index, list)
				// 只上传偶数索引的文件
				// if (index % 2 == 0) return true;
				// else return false;
			},

			//更换头像
			async chgAvatar() {
				const [, x] = await uni.chooseImage({
					count: 1
				});

				console.log('x :>> ', x.tempFilePaths[0]);
				// let path = x.tempFilePaths[0];
				// uni.uploadFile({
				// 	url: this.$API_URL + 'upload/upload', //仅为示例，非真实的接口地址
				// 	filePath: path,
				// 	name: 'uploadFile',
				// 	success: uploadFileRes => {
				// 		this.replace(JSON.parse(uploadFileRes.data).link);
				// 	}
				// });
			},

			goHome(url) {
				uni.navigateTo({
					url,
				})
			},


			async addShopping() {

				const res = await this.$u.post("api/Invoic/goods_add",{
					name: this.shoppinName,
					image: this.pathList,
					type_id: this.init, // 分类id
					unit_id:  this.classId,  // 单位id
				});
				if(res.code !== 1) {
					this.$tools.msg(res.msg)
				} else {
					this.$tools.msg(res.msg)
					uni.navigateBack({
						delta: 1
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.conter {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.conter-text {
		padding: 30rpx;

		.bgc {
			width: 100%;
			// height: 200rpx;
			padding: 0 30rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.text-heig {
				height: 108rpx;
				line-height: 108rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #F0F0F0;
			}


			.left-box {
				height: 310rpx;
				padding-top: 30rpx;

				/deep/.u-list-item.data-v-3d60ab68 {
					margin: 0 !important;
				}

				.info {
					width: 200rpx;
					height: 200rpx;
					background-color: red;
				}
			}


			.shop-heig {
				height: 144rpx;
				padding-top: 40rpx;

				view {
					margin-top: 24rpx;
					border-bottom: 1rpx solid #F0F0F0;
				}
			}
		}
	}

	.add {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		transform: translateX(-50%);
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
	}


	.box-btn {
		height: 100rpx;
		width: 90%;
		margin: 0 auto;
		line-height: 100rpx;
		margin-top: 20rpx;
		border-top: 1rpx solid #F0F0F0;
		display: flex;
		justify-content: space-around;

		view {
			width: 50%;
			text-align: center;
			border-right: 1rpx solid #F0F0F0;
		}

		view:last-child {
			border-right: 0;
		}
	}
</style>
